{% include 'include/header.twig.html' %}
<link rel="stylesheet" href="/assets/css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src="/assets/js/eModal.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/assets/js/base64.js"></script>
<script type="text/javascript" src="/assets/tools/js/twodimensioncode.js"></script>
<style type="text/css">
    #ui-datepicker-div {
        font-size: 11px;
    }

    .ui-menu-item {
    }

    .ui-autocomplete {
        font-size: 11px;
    }
</style>
<div class="page-title">
    <div class="title_left" style="width: 300px">
        <h3 style="font-size: 2em;">minio cli 查询</h3>
    </div>
</div>
<div class="container">
    <ul class="nav nav-tabs">
        <li>
            <a href="#" id="showList1">目录表查询</a>
        </li>
        <li>
            <a href="#" id="showList2">文件搜索（首次查询会耗时较久）</a>
        </li>
<!--        <li>-->
<!--            <a href="#" id="showList3">扩展</a>-->
<!--        </li>-->
    </ul>
    <div class="row">
        <div class="col-lg-6 dirList">
            <div class="input-group">
                <input id="key1" type="text" class="form-control">
                <span class="input-group-btn">
                <button id="go1" class="btn btn-default" type="button">
                    目录表查询
                </button>
            </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 dataList" style="display: none">
            <div class="input-group">
                <input id="key2" type="text" class="form-control">
                <span class="input-group-btn">
                <button id="go2" class="btn btn-default" type="button">
                    文件搜索
                </button>
            </span>
            </div>
        </div>
    </div>
<!--    <div class="row">-->
<!--        <div class="col-lg-6 checkList" style="display: none">-->
<!--            <div class="input-group">-->
<!--            <span class="input-group-btn" style="margin-top: 10px">-->
<!--                <button id="go3" class="btn btn-default" type="button">-->
<!--                    检查空目录（无法找到文件）-->
<!--                </button>-->
<!--            </span>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

    <hr style="height:10px;border:none;border-top:10px groove deepskyblue;">

    <div class="row">
        <div class="col-sm-12 col-md-12 dirList">
            <span id="keyList" style='font-size: 20px;'>
            </span>
        </div>
        <div class="col-sm-12 col-md-12 dataList" style="display: none">
            <span id="dataList" style='font-size: 20px;'>
            </span>
        </div>
<!--        <div class="col-sm-12 col-md-12 checkList" style="display: none">-->
<!--            <span id="checkList" style='font-size: 20px;'>-->
<!--            </span>-->
<!--        </div>-->
    </div>
</div>

<script type="text/javascript">

    $(function () {

        $("#showList1").click(function () {
            $(".dirList").show();
            $(".dataList").hide();
            $(".checkList").hide();
        });

        $("#showList2").click(function () {
            $(".dataList").show();
            $(".dirList").hide();
            $(".checkList").hide();
        });

        $("#showList3").click(function () {
            $(".dataList").hide();
            $(".dirList").hide();
            $(".checkList").show();
        });

        $("#go1").click(function () {
            $("#keyList").empty();
            $("#keyList").html("<span>搜索中</span>")
            getKey($("#key1").val());
        });

        function getKey(key) {
            var url = "/api/searchFileKey?key=" + key;
            $.get(url, function (data, status) {
                console.log(data)
                if (status === "success") {
                    $("#keyList").empty();
                    if (!data.key || data.key.length === 0) {
                        $("#keyList").append("<span>没有匹配的数据</span>")
                    } else {
                        for (var i = 0; i < data.key.length; i++) {
                            $("#keyList").append("<span>" + data.key[i] + "</span><hr style='height: 1px;padding: 0;border: 0;margin: 0;border-top:5px groove skyblue;'>")
                        }
                    }
                } else {
                    $("#keyList").append("<span>没有匹配的数据</span>")
                    console.log("创建失败");
                }
            });
        }

        $("#go2").click(function () {
            if ($("#dataList").html() !== '<span>搜索中</span>') {
                $("#dataList").empty();
                getList($("#key2").val());
            }
            $("#dataList").html("<span>搜索中</span>")
        });

        function getList(key) {
            var url = "/api/searchFileList?key=" + key;
            $.get(url, function (data, status) {
                console.log(data)
                if (status === "success") {
                    $("#dataList").empty();
                    if (!data.data) {
                        data.error.forEach(d => {
                            $("#dataList").append("<span>" + d + "</span>")
                        });
                    } else {
                        data.data.forEach(d => {
                            var show = d.substring(5)
                            var pre = "private/"
                            d = Base64.encode(d.substring(5 + pre.length, d.lastIndexOf("/") + 1))
                            $("#dataList").append("<a target='_blank' href='" + data.showUrl + pre + d + "'>" + show + "</a><hr style='height: 1px;padding: 0;border: 0;margin: 0;border-top:5px groove skyblue;'>")
                        })
                    }
                } else {
                    console.log("创建失败");
                }
            });
        }

        $("#go3").click(function () {
            $("#checkList").empty();
            $("#checkList").html("<span>搜索中</span>")
            getCheck();
        });

        function getCheck() {
            var url = "/api/searchFileCheck";
            $.get(url, function (data, status) {
                if (status === "success") {
                    $("#checkList").empty();
                    data.check.forEach(d => {
                        $("#checkList").append("<span>" + d + "</span><hr style='height: 1px;padding: 0;border: 0;margin: 0;border-top:5px groove skyblue;'>")
                    })
                } else {
                    console.log("创建失败");
                }
            });
        }
    });

</script>

{% include 'include/footer.twig.html' %}